<template>
	<view class="contactUs">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="contactUs-box">
			<view class="contactUs-tips"><text>客服热线</text></view>
			<view class="contactUs-tel"><text>400-000-2249</text></view>
			<view class="contactUs-copy" @click="copyText('400-000-2249')"><text>复制号码</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'客服热线'
			};
		},
		methods:{
			copyText(val){
			    let result
			    // #ifdef H5 
				let textarea = document.createElement("textarea")
				textarea.value = val
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选中文本内容
				textarea.setSelectionRange(0, val.length) 
				result = document.execCommand("copy") 
				textarea.remove()    
			    // #endif
				uni.showToast({
					title:'复制成功',
					icon:'none'
				})
				return result
			},
		}
	}
</script>

<style lang="less">
	.contactUs{
		width: 100%;
		min-height: 100vh;
		background-color: #181A20;;
		font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
		font:caption;
		display: flow-root;
		.contactUs-box{
			width: 100%;
			.contactUs-tips{
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
				margin-top: 110rpx;
			}
			.contactUs-tel{
				font-size: 60rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
				margin-top: 24rpx;
				text-align: center;
			}
			.contactUs-copy{
				width: 486rpx;
				height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 45rpx;
				margin: 104rpx auto 0;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
